<template>
<div>
    <div class="banner" @click="handleBannerClick">
        <img 
        class="banner-img"
        :src="bannerImg"
        >
        <div class="banner-info">
             <div class="banner-title">
               {{ this.sightName }}
            </div>
            <div class="banner-number">
                <span class="iconfont banner-icon">&#xe625;</span>
                {{ this.bannerImgs.length }}
            </div>
        </div>
    </div>
    <fade-animation>
         <common-gallary 
        :imgs="bannerImgs" 
        v-show="showGallary"
        @close="handleGallaryClick"
        ></common-gallary>
    </fade-animation>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
import FadeAnimation from 'common/fade/fade'
export default {
    name:'DetailBanner',
    props: {
        bannerImg:String,
        sightName:String,
        bannerImgs:Array
    },
    data(){
        return{
            showGallary:false,
        }
    },
    methods:{
        handleBannerClick(){
            this.showGallary=true
        },
        handleGallaryClick(){
            this.showGallary=false
        }
    },
    components: {
        CommonGallary,
        FadeAnimation
    }
}
</script>
<style lang='stylus' scoped>
.banner
    position relative
    overflow hidden
    height 0
    padding-bottom 55%
    .banner-img
        width 100%
    .banner-info
        display flex
        position absolute
        left 0
        right 0
        bottom 0
        line-height .6rem
        color fff
        background-image linear-gradient(top, rgba( 0,0,0,0), rgba(0,0,0,0.8))
    .banner-title
        font-size .36rem
        padding 0 .2rem
        flex 1
        color #fff
    .banner-number
        height .4rem
        line-height .4rem
        margin-top .14rem
        padding 0 .2rem
        border-radius .2rem
        background rgba(0, 0, 0, .5)
        color #fff
        text-align center
        font-size .24rem
        .banner-icon
            font-size .24rem
</style>
